情境

今天你拿到了一筆待整理的水果種類資料（apple）。稍微看過後，覺得只有一筆，整理起來不難。

下一次拿到了五筆的水果種類清單（apple、kiwi、banana、lemon、mango），還在想可不可以少打點字時……

一個野生的空陣列出現了！

let fruits = [];

趕快把資料塞進去 R ！

fruits.push("apple", "kiwi", "banana", "lemon", "mango");

於是剛剛那堆資料瞬間整理的乾淨又整齊，一個陣列的宣告就完成了，連座號都準備好了呢。

let fruits = ['apple', 'kiwi', 'banana', 'lemon', 'mango'];

// 檢查一下有沒成功塞資料進去
let length = fruits.length;

console.log(length); // 5
console.log(fruits); // 'apple', 'kiwi', 'banana', 'lemon', 'mango'
console.log(fruits[0]); // apple
console.log(fruits[1]); // kiwi
console.log(fruits[2]); // banana
console.log(fruits[3]); // lemon
console.log(fruits[4]); // mango
console.log(typeof fruits); // object

以上面的例子來看，陣列就像一個清單（但它其實是物件），每一筆資料都有著自己的座號：index（索引值），被 push() 放入清單的資料會依座號（index，由 0 開始）坐好。可以藉由 JS 的原生方法來為陣列新增、刪除、查詢或是修改資料。

以下進入正文。

基本概念

let fruits = ['apple', 'kiwi', 'banana', 'lemon', 'mango'];

在 JS 的世界中，陣列大概是最常見的資料格式之一。一個陣列的宣告大概長這樣：陣列儲存於一個具適當名稱的變數中，資料排列於中括號 [ ] 內，每筆資料間以逗號分隔。陣列內可以存放各種資料，型別可以是字串、數字、變數或是物件。

對電腦來說，陣列中每個位置都有自己的索引值（index），要處理資料的話，需要指定 index，才能找到正確的資料；而這個索引值的起始永遠是 0。

常用的新增法

array.push

• 可增加一或多個元素至陣列的末端，並回傳陣列的新長度

let arr = [];
let newLength = arr.push("apple", 3, "coin");

console.log(newLength); // 3
console.log(arr); // [ 'apple', 3, 'coin' ]

array.unshift

• 可增加一或多個元素至陣列的開頭，並回傳陣列的新長度

let arr = [1, 2, 3];
let newLength = arr.unshift("apple", "banana");

console.log(newLength); // 5
console.log(arr); // [ 'apple', 'banana', 1, 2, 3 ]

常用的讀取法

array[i]

• 以指定的 index 讀取一筆陣列值

let arr = [1, 2, 3];

console.log(arr[2]); // 3

array.foreach()

• 使用迴圈來執行 callback function ，將參數傳進 callback function 以達成計算／運作。

// 語法
forEach(callbackFn)
forEach(callbackFn, thisArg)

• 語法說明：

  • callbackFn：要在此迴圈中對陣列做什麼事情。返回的值會被捨棄。可以是一般函式，也可以是箭頭函式。

    • element：被處理的元素
    • index：被處理的元素索引值
    • array：被帶入迴圈的 array

  • thisArg：預設為 undefined；似乎很少用？

    • 若 callbackFn 使用箭頭函式，因為箭頭函式沒有自己的 this，故 thisArg 無作用。
    • 呼叫 callbackFn 時，作為 this 的值

來練習一下吧。
目的是以原有陣列 arr 做出一個新陣列。需注意此新陣列的元素值無法被五整除。

let arr = [1, 3, 5, 7, 9, 11];
let newArr = [];

arr.forEach(function (element) {
  if (element % 5 === 0) {
    return
  };
  newArr.push(element);
})

console.log(newArr); // 1, 3, 7, 9, 11

array.length

• 陣列的長度／陣列裡有幾筆資料

let arr = [1, 2, 3];

console.log(arr.length); // 3

存取陣列中的陣列

• 可用多組中括號取值
  • 以範例來說，random[2][2] 表示取 random 索引值為 2 的資料，再找這筆資料內 index 為 2 的值

// code 來自 MDN
let random = ["tree", 795, [0, 1, 2]];

console.log(random[2][2]);

常用的更新／修改法

array[i]= newValue

• 使用 Index 直接指定修改的位置並賦值

let arr = [1, 2, 3];
arr[2] = 30;

console.log(arr[2]); // 30
console.log(arr); // [ 1, 2, 30 ]

常用的刪除法

array.pop()

• 從陣列中刪去最後一筆資料並回傳其值。
• 會更動到原陣列。

let arr = [1, 2, 3, 50];
let cut = arr.pop();

console.log(arr); // 1,2,3
console.log(cut); // 50

array.shift()

• 從陣列中刪除第一筆資料並回傳其值。會更動到原陣列。

let arr = [1, 2, 3, 50];
let cut = arr.shift();

console.log(arr); // 2, 3, 50
console.log(cut); // 1

array.splice()

• 藉刪除原有元素且／或新增元素來改變陣列

// 語法
splice(start);
splice(start, deleteCount);
splice(start, deleteCount, item1);
splice(start, deleteCount, item1, item2, itemN);

• 語法說明：

  • start：

    • 陣列的索引值，為待改變的起點。
    • 省略的話，不會刪除任何元素

  • deleteCount：

    • 要刪除的數量。
    • 若 deleteCount 為 0 或是負數，不會刪除任何元素，但必須指定至少一個新值（itemN）以加入陣列中。

  • itemN：

    • 待加入的元素。
    • 若沒指定，splice() 只會依 start 與 deleteCount 來刪除元素。

  • 回傳值：

    • 由被刪除的元素組成的陣列。
    • 若沒有被刪除的元素，會回傳空陣列。

練習一下

let arr1 = [1, 2, 3, 50];
let cut1 = arr1.splice(3);

console.log(arr1); // 1, 2, 3
console.log(cut1); // 50

let arr2 = [1, 2, 3, 4, 5, 6];
let cut2 = arr2.splice(4, 2);

console.log(arr2); // 1, 2, 3, 4
console.log(cut2); // 5, 6

let arr3 = [1, 2, 3, 4, 5, 6];
let cut3 = arr3.splice(2, 1, 50);

console.log(arr3); // 1, 2, 50, 4, 5, 6
console.log(cut3); // 3

let arr4 = [1, 2, 3, 4, 5, 6];
let cut4 = arr4.splice(2, 1, 50, 75);

console.log(arr4); // 1, 2, 50, 75, 4, 5,  6
console.log(cut4); // 3

最近產文速度慢，要再努力！

參考資料

• Arrays - 學習該如何開發 Web | MDN，https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/Arrays
• Array - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array
• Array 陣列 - JavaScript 教學｜ALPHA Camp - JavaScript 入門指南，https://javascript.alphacamp.co/array.html
• Array.prototype.unshift() - JavaScript | MDN，https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift
• Array.prototype.splice() - JavaScript | MDN，https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
• JS 迴圈升級的陣列 Array 方法 forEach() - iT 邦幫忙，https://ithelp.ithome.com.tw/articles/10228571
• Array forEach() for loop 陣列 - JavaScript (JS) 教學 Tutorial，https://www.fooish.com/javascript/array/forEach.html